<script setup lang="ts">
const props = defineProps({
  type: {
    type: String,
    required: false,
    default: 'primary'
  },
  height: {
    type: Number,
    required: false,
    default: 35
  },
  width: {
    type: Number,
    required: false,
    default: 150
  }
});
</script>

<template>
  <span :class="props.type" :style="{height: props.height + 'px', width: props.width + 'px'}">
<!--    <span>-->
      <slot></slot>
<!--    </span>-->
  </span>
</template>

<style scoped>
.primary {
  display: flex;
  justify-content: center;
  align-items: center;
  /*height: 30px;*/
  /*width: 200px;*/
  color: white;
  font-size: var(--font-size-base);
  background-color: var(--color-primary);
  font-weight: 600;
  border-radius: 17px;
}
.light {
  word-break: break-all;
  white-space: nowrap;
  /*text-overflow: ellipsis;*/
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  /*height: 30px;*/
  /*width: 200px;*/
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  font-size: var(--font-size-base);
  background-color: white;
  font-weight: 600;
  border-radius: 17px;
  /*& span {*/
  /*  overflow: hidden;*/
  /*  text-overflow: ellipsis;*/
  /*  white-space: nowrap;*/
  /*  width: calc(100% - 20px);*/
  /*}*/
}
.secondary {
  display: flex;
  justify-content: center;
  align-items: center;
  /*height: 30px;*/
  /*width: 200px;*/
  border: 2px solid var(--color-secondary);
  color: var(--color-secondary);
  font-size: var(--font-size-base);
  background-color: white;
  font-weight: 600;
  border-radius: 17px;

}
:hover {
  cursor: pointer;
  border: none;
  color: var(--color-primary);
  background-color: var(--color-plain);
  transition-property: background-color, color, font-size, border;
  transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
  transition-duration: 0.2s, 0.2s, 0.1s, 0.2s;
  font-weight: 600;
  font-size: calc(var(--font-size-base) - 1px);
}
</style>